<template>
  <textarea ref="textarea" :value="value" @input="updateValue($event)" @keyup="handlerKeyUp" rows="1"></textarea>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  value: String,
})

const textarea = ref<HTMLTextAreaElement>()
const emit = defineEmits(['update:value'])

const handlerKeyUp = () => {
  const newHeight = textarea.value?.scrollHeight
  if (textarea.value) {
    textarea.value.style.height = newHeight + 'px'
  }
}
const updateValue = (event: any) => {
  emit('update:value', event.target.value)
}
watch(() => props.value, handlerKeyUp)
</script>
